<script setup>
import http from '@/utils/http.js'
import { ref,onMounted } from 'vue'
import Top from './components/top/index.vue'
import Tourist from './components/tourist/index.vue'
import Sex from './components/sex/index.vue'
import Age from './components/age/index.vue'
import Map from './components/map/index.vue'
import Line from './components/line/index.vue'
import Rank from './components/rank/index.vue'
import Year from './components/year/index.vue'
import Couter from './components/couter/index.vue'

let screen = ref()  // 获screen元素的实例



onMounted(()=>{
    setContentSize()
})

/* 
    关于让页面内容随用户屏幕的大小变化而等比例变化的说明
    元素的缩放可以用 css3的属性 transform 来设置，这个属性一般用来设置元素进行什么变化，例如元素的大小变化、缩放、旋转、移动等
        # 常用的属性变化请参考 https://www.runoob.com/cssref/css3-pr-transform.html
    然后如果想做动画的话，可以再配合上 css3的 transition 属性，用来指定这个变化的速率和时间。例如：transition: 0.5s; 设置这个元素属性的变化在0.5秒里完成
    
    由于元素默认缩放的基点是元素中心点，为了防止元素缩放后偏离预定的位置，所以这里把元素的缩放基点改为元素的左上角，然后把元素的左上角定位到窗口中间，等缩放完后再重新把元素移动回原来的位置
    我感觉似乎没必要这么麻烦，似乎只要把元素的缩放基点设置成左上角就好了，没必要再把元素定位到屏幕中间再进行缩放。但由于老师是这么教的，为了保险起见还是加上这一步
*/

// 根据用户屏幕视口的缩放大小，缩放页面内容
const setContentSize = () => {
    screen.value.style.transform=`scale(${getScale()}) translate(-50%,-50%)`
}

window.onresize = ()=>{  // 窗口大小发生变化，页面内容也跟着进行缩放
    setContentSize()
}
// 以1920*1080的大小为基础，根据用户当前的屏幕视口的变化，计算屏幕的缩放比例
const getScale = (w = 1920, h = 1080) => {
    let ww = window.innerWidth / w
    let wh = window.innerHeight / h
    return ww < wh ? ww : wh
}
</script>

<template>
    
    <div class="container">
        <!-- 数据大屏内容展示区 -->
        <div class="screen" ref="screen">
            <div class="top">
                <Top></Top>
            </div>
            <div class="bottom">
                <div class="left">
                    <Tourist class="tourist"></Tourist>
                    <Sex class="sex"></Sex>
                    <Age class="age"></Age>
                </div>
                <div class="center">
                    <Map class="map"></Map>
                    <Line class="line"></Line>
                </div>
                <div class="right">
                    <Rank class="rank"></Rank>
                    <Year class="year"></Year>
                    <Couter class="couter"></Couter>
                </div>
                
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.container {
    width:100vw;
    height: 100vh;
    background: url('/public/img/screen/bg.png') no-repeat;
    background-size: cover;
    .screen{
        position: fixed;
        transform-origin: left top;
        width:1920px;
        height: 1080px;
        // background: skyblue;
        top: 50%;
        left: 50%;
        transition: 0.5s;
        .top{
            width: 100%;
            height: 40px;
        }
        .bottom{
            display: flex;
            .left{
                flex: 1;
                height: 1040px;
                // background-color: red;
                display: flex;
                flex-direction: column;
                .tourist{
                    flex: 1.2;
                }
                .sex{
                    flex:1
                }
                .age{
                    flex:1
                }
            }
            .center{
                flex: 2;
                display: flex;
                flex-direction: column;
                .map{
                    width: 100%;
                    flex: 4;
                    // background-color: pink;
                }
                .line{
                    width: 100%;
                    flex: 1;
                    // background-color: orange;
                }
            }
            .right{
                flex: 1;
                display: flex;
                flex-direction: column;
                .rank{
                    flex: 1.2;
                }
                .year{
                    flex: 1;
                }
                .couter{
                    flex:1;
                }
            }
        }
    }
}
</style>